<%@ page language="java" contentType="text/html; charset=EUC-KR" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>admin</title>
<link rel="stylesheet" type="text/css" href="/design/resource/js/extjs/resources/css/ext-all.css" >
<script src="/design/resource/js/extjs/ext-all.js" type="text/javascript"></script>
<script type="text/javascript">
Ext.require([
	'Ext.tree.*',
	'Ext.data.*',
	'Ext.tip.*'
]);

Ext.onReady(function(){
	Ext.QuickTips.init();
	
	var store = Ext.create('Ext.data.TreeStore', {
		proxy: {
			type: 'ajax'
			, url: 'json/getNodes.do'
		}
		, root: {
			text: 'Ext'
			, id: 'Ext'
			, expanded: true
		}
		, folderSort: true
		, sorters: [{
			property: 'test'
			, direction: 'ASC'
		}]
	});
	
	 var tree = Ext.create('Ext.tree.Panel', {
        store: store,
        viewConfig: {
            plugins: {
                ptype: 'treeviewdragdrop'
            }
        }
 		, renderTo: 'tree-div'
 		, height: 680
 		, width: 250
 		, title: 'Files'
 		, useArrows: true
 		, dockedItems: [{
            xtype: 'toolbar'
            , items: [{
                text: 'Expand All',
                handler: function(){
                    tree.getEl().mask('Expanding tree...');
                    var toolbar = this.up('toolbar');
                    toolbar.disable();
                    
                    tree.expandAll(function() {
                        tree.getEl().unmask();
                        toolbar.enable();
                    });
                }
            }, {
                text: 'Collapse All',
                handler: function(){
                    var toolbar = this.up('toolbar');
                    toolbar.disable();
                    
                    tree.collapseAll(function() {
                        toolbar.enable();
                    });
                }
            }]
        }]
    });
});
</script>
</head>
<body>
	<div id="tree-div"></div>
</body>
</html>